import { render, screen } from '@testing-library/react';
import { describe, expect, it } from 'vitest';

import hexToRgb from '../utils/color';
import PixelProgress from './pixel-progress';

describe('PixelProgress', () => {
  it('应该正确渲染组件', () => {
    render(<PixelProgress progress={50} />);
    expect(screen.getByText('50%')).toBeDefined();
  });

  it('应该正确显示进度百分比', () => {
    render(<PixelProgress progress={75} />);
    expect(screen.getByText('75%')).toBeDefined();
  });

  it('应该限制进度值在0-100范围内', () => {
    render(<PixelProgress progress={120} />);
    expect(screen.getByText('100%')).toBeDefined();

    render(<PixelProgress progress={-10} />);
    expect(screen.getByText('0%')).toBeDefined();
  });

  it('应该根据showPercentage属性控制百分比文本的显示', () => {
    const { rerender } = render(
      <PixelProgress progress={50} showPercentage={true} />,
    );
    expect(screen.queryByText('50%')).not.toBeNull();

    rerender(<PixelProgress progress={50} showPercentage={false} />);
    expect(screen.queryByText('50%')).toBeNull();
  });

  it('应该应用自定义类名和样式', () => {
    const { container } = render(
      <PixelProgress
        progress={50}
        className="custom-class"
        style={{ margin: '10px' }}
      />,
    );

    const progressElement = container.firstChild as HTMLElement;
    expect(progressElement.classList.contains('custom-class')).toBe(true);
    expect(progressElement.style.margin).toBe('10px');
  });

  it('应该使用自定义颜色', () => {
    const customBgColor = '#e0e0e0';
    const customFillColor = '#ff0000';
    const customTextColor = '#0000ff';

    const { container } = render(
      <PixelProgress
        progress={50}
        backgroundColor={customBgColor}
        fillColor={customFillColor}
        textColor={customTextColor}
      />,
    );

    const pixelContainer: HTMLElement = container.querySelector(
      '.pixel-progress-container',
    )!;
    expect(pixelContainer.style.backgroundColor).toBe(hexToRgb(customBgColor));

    const filledPixel: HTMLElement = container.querySelector('.pixel.filled')!;
    expect(filledPixel.style.backgroundColor).toBe(hexToRgb(customFillColor));

    const textElement: HTMLElement = container.querySelector(
      '.pixel-progress-text',
    )!;
    expect(textElement.style.color).toBe(hexToRgb(customTextColor));
  });

  it('应该使用自定义像素大小和间距', () => {
    const customPixelSize = 8;
    const customPixelGap = 2;

    const { container } = render(
      <PixelProgress
        progress={50}
        pixelSize={customPixelSize}
        pixelGap={customPixelGap}
      />,
    );

    const pixel: HTMLElement = container.querySelector('.pixel')!;
    expect(pixel.style.width).toBe(`${customPixelSize}px`);
    expect(pixel.style.height).toBe(`${customPixelSize}px`);

    // 检查第二个像素的位置是否考虑了自定义间距
    const pixels = container.querySelectorAll('.pixel');
    if (pixels.length >= 2) {
      const secondPixel = pixels[1] as HTMLElement;
      expect(secondPixel.style.left).toBe(
        `${customPixelSize + customPixelGap}px`,
      );
    }
  });

  it('应该使用自定义宽度和高度', () => {
    const customWidth = '200px';
    const customHeight = '30px';

    const { container } = render(
      <PixelProgress progress={50} width={customWidth} height={customHeight} />,
    );

    const progressElement = container.firstChild as HTMLElement;
    expect(progressElement.style.width).toBe(customWidth);
    expect(progressElement.style.height).toBe(customHeight);
  });
});
